<template>
	<li :class="{[prefixCls+'-submenu']:true,[prefixCls+'-submenu-active']:isActive}"
		@mouseenter="over"
		@mouseleave="out"
		>
		<div :class="{[prefixCls+'-submenu-title']:true,'show':dropdownShow,'open':isDropDown}" @click="onCollapse(name)">
			<slot name="title"></slot>
			<i class="icon icon-arrow-down"></i>
		</div>
		<transition name="slide" 
			@before-enter="beforeEnter" 
			@enter="enter" 
			@leave="leave">
			<div :class="[prefixCls+'-subment-dropdown']" ref="submenu" v-if="modeType=='horizontal'">
				<div :class="[prefixCls+'-submenu-drop-list']" ref="submenuList">
					<slot></slot>
				</div>
			</div>
			<!-- 导航horizontal 和 vertical，展示不同的结构 -->
			<div :class="[prefixCls+'-subment-dropdown']" ref="submenu" v-show="isDropDown" v-else>
				<div :class="[prefixCls+'-submenu-drop-list']" ref="submenuList">
					<slot></slot>
				</div>
			</div>
		</transition>
	</li>
</template>

<script>
import { prefixCls } from '../prefix'

export default {
	name: `${prefixCls}Submenu`,
	props:{
		name:{
			type:[String, Number]
		},
	},
	data() {
		return {
			prefixCls: prefixCls,
			modeType:'',
			dropdownShow:false,//下拉层显示
			isActive:false,//二级菜单中是否有选中菜单
			clearTime: {
				down:'',
				up:''
			},
			isDropDownShow:false,//二级导航下拉层是否显示状态，配合setTimeout使用
			isDropDown:false,//垂直导航，二级导航显示,默认不显示
			accordion:false,//手风琴效果
		}
	},
	mounted() {
		const _this = this;
		const parent = this.$parent;

		// 获取当前导航类型
		this.modeType = this.$parent.mode;

    	// 如果设置了手风琴效果
    	if(parent.accordion){
    		_this.accordion = true;
    		_this.isDropDown = false;
    	}

		// 设置垂直导航默认展开元素
    	if(this.modeType == 'vertical') {
			let actStr = parent.active.toString();
			let isSub = actStr.indexOf("-") != -1;
			if(isSub) {
				// 二级导航
				let index = actStr.lastIndexOf('-');
				let id = actStr.substring(0,index);
				// console.log('设置垂直导航默认展开元素',id)
				// 触发当前菜单
				_this.onCollapse(id)

				// 如果设置了手风琴效果，激活当前菜单，收起其他二级导航
				if(_this.accordion){
					if(id == _this.name){
						_this.isDropDown = true
					}
				}else{
					// _this.isDropDown = true
				}
			}
    	}
	},
	methods:{
		// 展开
		over(){
			const _this = this;
			//导航类型是垂直的，不执行hover效果
			if(_this.modeType == 'vertical' || _this.modeType === undefined) return false;
			clearTimeout(_this.clearTime.up)
			_this.clearTime.down = setTimeout(() => {
				_this.$refs.submenu.classList.add('slide-down')
				_this.$refs.submenu.classList.remove('slide-up')
				_this.dropdownShow = true
				_this.isDropDownShow = true
			},300)
		},
		// 收起
		out(){
			const _this = this;
			//导航类型是垂直的，不执行hover效果,(状态为undefined，垂直导航中的三级导航，水平里暂无三级，所以会跳过)
			// console.log('收起',this.modeType)
			if(_this.modeType == 'vertical' || _this.modeType === undefined) return false;
			clearTimeout(_this.clearTime.down)
			if(_this.isDropDownShow) {
				_this.$refs.submenu.classList.remove('slide-down')
				_this.$refs.submenu.classList.add('slide-up')
				_this.dropdownShow = false
				_this.isDropDownShow = false
				_this.clearTime.up = setTimeout(()=>{
					_this.$refs.submenu.classList.remove('slide-up')
				},300)
			}
		},
		// 接收来自menuItem组件的事件
		getMenuItemAction(name){
			//收起下拉层
			this.out()

			//改变menuGroup组件中当前选中项，只允许一个
			this.getMenuItem().forEach(function(item, index) {
				item.$children.forEach(function(d, i) {
					d.active = name
				})
			})
			this.isActive = true;
		},
        //使用$children遍历子组件，得到所有的menuGroup组件
        getMenuItem() {
            return this.$children.filter(function(item) {
                return item.$options.name === `${prefixCls}MenuGroup`;
            })
        },
        onCollapse(id){
        	id = id.toString()
        	//导航类型是水平的，不执行click效果
        	if(this.modeType == 'horizontal') return false;

        	// console.log('%c接收到的name和id:','color:orange',this.name , id)

        	if(this.name == id) {
        		this.isDropDown = !this.isDropDown;
        	}

        	//如果三级导航激活状态，最上层的父级打开。
        	if(id.indexOf('-') < 0) {
        		return false
        	}
			let _a = id.lastIndexOf('-');
			let _b = id.substring(0,_a);
			if(_b){
				if(this.name == _b) {
					this.isDropDown = !this.isDropDown;
					// this.$refs.submenu.style = 'transition:none'
				}
			}else{
	        	// 手风琴效果
				if(this.accordion){
					this.$parent.onAccordion(id);
				}
			}
        },
	    beforeEnter: function (el) {
	    	// console.log('动画enter之前',el);
	    },
	    enter:function(el,done){
	    	// console.log('动画enter进入',el);
	    	this.$refs.submenu.style.height = this.$refs.submenuList.offsetHeight+'px'
	    	setTimeout(()=>{
	    		el.removeAttribute("style")
	    	},300)
	    },
	    leave: function (el, done) {
	    	el.style.height = el.offsetHeight+'px'
	    	setTimeout(()=>{
	    		el.removeAttribute("style")
	    	},300)
	    },
	},
}
</script>

<style> 
.slide-enter-active, .slide-leave-active {
    transition: height .3s ease; 
}
.slide-enter, .slide-leave-to {
    height:0!important;
}
</style>